<template>
    <div class='Tabs'>
        <a-tabs v-model:activeKey="activeKey" type="card" @change="changeTabs">
            <a-tab-pane v-for="item in list" :key="item.key" :tab="item.tab"></a-tab-pane>
        </a-tabs>
    </div>
</template>

<script lang='ts' setup>

import { toRefs } from 'vue'

let emit = defineEmits(['update:activeKey'])
let prop = defineProps({
    activeKey: {
        type: String,
        default: '1'

    },
    list: {
        type: Array<{ tab: string; key: string }>,
        default: () => {
            return []
        }

    }
})
let { activeKey, list } = toRefs(prop)
let changeTabs = (e) => {
    emit('update:activeKey', e)
}
</script>

<style scoped lang='less'>
.Tabs{
    display: inline-block
}
</style>